<template>
<div class="order">
    <div class="order__price">实付金额 <b>&yen;{{calculations.price}}</b></div>
    <div
        class="order__btn"
        @click="() => handleShowConfirmChange(true)"
        >提交订单
    </div>
</div>
<div
    class="mask"
    v-show="showConfirm"
    @click="() => handleShowConfirmChange(false)"
>
    <div class="mask__content" @click.stop>
        <h3 class="mask__content__title">确认要离开收银台?</h3>
        <p class="mask__content__desc">请尽快完成支付，否则将被取消</p>
        <div class="mask__content__btns">
            <div
                class="mask__content__btn mask__content__btn--first"
                @click="() => handleConfirmOrder(true)"
                >取消订单</div>
            <div
                class="mask__content__btn mask__content__btn--last"
                @click="() => handleConfirmOrder(false)"
                >确认支付</div>
        </div>
    </div>
</div>
<Toast v-if="show" :message="toastMessage"/>
</template>

<script>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { post } from '../../utils/request'
import { useCommonCartEffect } from '../../effects/cartEffects'
import Toast, { useToastEffect } from '../../components/Toast'

// 下单相关逻辑
const useMakeOrderEffect = (shopId, shopName, productList) => {
  const router = useRouter()
  const store = useStore()
  // 弹出框消息内容提示
  const { show, toastMessage, showToast } = useToastEffect()
  // 弹出框的确认(取消)支付
  const handleConfirmOrder = async (isCanceled) => {
    const products = []
    for (const i in productList.value) {
      const product = productList.value[i]
      products.push({ id: parseInt(product._id, 10), num: product.count })
    }
    try {
      const result = await post('/api/order', {
        addressId: 1, // 收货地址 id
        shopId: shopId,
        shopName: shopName.value,
        isCanceled, // 订单是否被取消了
        products: products
      })
      if (result?.errno === 0) {
        store.commit('clearCartData', shopId)
        router.push({ name: 'OrderList' })
      } else {
        showToast('请求结果失败')
      }
    } catch (e) {
      showToast('请求失败')
    }
  }
  return { handleConfirmOrder, show, toastMessage, showToast }
}

// 蒙层展示相关的逻辑
const useShowMaskEffect = () => {
  const showConfirm = ref(false)
  // 是否显示弹出框
  const handleShowConfirmChange = (status) => {
    showConfirm.value = status
  }
  return { showConfirm, handleShowConfirmChange }
}

export default {
  name: 'Order',
  components: { Toast },
  setup () {
    const route = useRoute()
    const shopId = parseInt(route.params.id, 10)
    const { calculations, productList, shopName } = useCommonCartEffect(shopId)
    // 蒙层展示相关的逻辑
    const { showConfirm, handleShowConfirmChange } = useShowMaskEffect()
    // 下单相关逻辑
    const { handleConfirmOrder, show, toastMessage, showToast } = useMakeOrderEffect(shopId, shopName, productList)

    return { showConfirm, handleShowConfirmChange, calculations, handleConfirmOrder, show, toastMessage, showToast }
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/viriables.scss';

.order {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  height: .49rem;
  line-height: .49rem;
  background: $bgColor;
  &__price {
    flex: 1;
    text-indent: .24rem;
    font-size: .14rem;
    color: $content-fontcolor;
  }
  &__btn {
    width: .98rem;
    background: #4FB0F9;
    color: $bgColor;
    text-align: center;
    font-size: .14rem;
  }
}
.mask {
    z-index: 1;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,0.50);
    &__content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 3rem;
        height: 1.57rem;
        background: #FFF;
        text-align: center;
        border-radius: .04rem;
        &__title {
            margin: .24rem 0 0 0;
            line-height: .26rem;
            font-size: .18rem;
            color: #333;
        }
        &__desc {
            margin: .08rem 0 0 0;
            font-size: .14rem;
            color: #666;
        }
        &__btns {
            display: flex;
            margin: .24rem .58rem;
        }
        &__btn {
            flex: 1;
            width: .8rem;
            line-height: .32rem;
            border: .01rem solid #4FB0F9;
            border-radius: .16rem;
            font-size: .14rem;
            &--first {
                margin-right: .12rem;
                border: .01rem solid #4FB0F9;
                color: #4FB0F9;
            }
            &--last {
                margin-left: .12rem;
                background: #4FB0F9;
                color: #FFF;
            }
        }
    }
}
</style>
